<template>
  <div class="page-box">
    <!-- 搜索栏 -->
    <search @searchCallBack="searchCallBack" ref="seachFrom" :searchField="searchField" />
    <!-- 操作部分 -->
    <div class="operation-box cenBet">
      <div class="operation-left">
        <el-button @click="performance_appeal(2)" icon="el-icon-success" type="success">同意申诉</el-button>
        <el-button @click="performance_appeal(3)" icon="el-icon-error" type="danger">拒绝申诉</el-button>
        <el-button type="text">共计<span>{{tablePaginationQuery.total}}</span>人</el-button>
      </div>
      <div class="operation-right">
        <el-button @click="performance_issuedScore()" icon="el-icon-s-check">下发得分</el-button>
        <el-button :loading="leadOutLoading" @click="performance_expExcel()" icon="el-icon-download">导出</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table @selection-change="tableComChange" :data="tableData" v-loading="tableLoading" max-height="780" element-loading-text="数据加载中..." border>
      <el-table-column fixed='left' type="selection" align="center" width="60" />
      <el-table-column prop="quarter_name" label="考核季度" align="center" fit></el-table-column>
      <el-table-column prop="user_name" label="姓名" align="center" fit></el-table-column>
      <el-table-column prop="dept_list" label="部门" align="center" fit></el-table-column>
      <el-table-column prop="hiredate" label="入职时间" align="center" fit></el-table-column>
      <el-table-column prop="me_date" label="评分时间" align="center" fit></el-table-column>
      <el-table-column prop="values_score" label="价值观分数" align="center" fit></el-table-column>
      <el-table-column prop="work_score" label="工作绩效分数" align="center" fit></el-table-column>
      <el-table-column prop="end_score" label="绩效考核总分" align="center" fit></el-table-column>
      <el-table-column prop="score_level" label="绩效考核等级" align="center" fit></el-table-column>
      <el-table-column label="有无备注" align="center" fit>
        <template slot-scope="scope">
          <el-tag :type='scope.row.is_note==1?"":"info"'>{{scope.row.is_note==1?"有备注":"无备注"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="end_score" label="下发分数" align="center" fit></el-table-column>
      <el-table-column prop="is_appeal" width="100px" label="是否申诉" align="center" fit>
        <template slot-scope="scope">
          <el-tag v-if="representations_status[scope.row.is_appeal||0].lable" :type="representations_status[scope.row.is_appeal||0].type">{{representations_status[scope.row.is_appeal||0].lable }}</el-tag>
          <el-popover placement="left" title="申述理由:" width="200" trigger="hover" :content="scope.row.message">
            <div style="max-height:40px;" slot="reference" v-show="scope.row.message">申述理由:{{scope.row.message}}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="自评提交时间" align="center" fit></el-table-column>
      <el-table-column prop="approve_date" label="审核结束时间" align="center" fit></el-table-column>
      <!-- <el-table-column prop="approve_status" label="审核状态" align="center" width="136px">
        <template slot-scope="scope">
          <el-tag :type="approve_status[scope.row.approve_status||0].type">{{approve_status[scope.row.approve_status||0].lable }}</el-tag>
        </template>
      </el-table-column> -->
      <el-table-column width="260px" label="操作" align="center">
        <template slot-scope="scope">
          <el-popover placement="left" :title="scope.row.performance_findMessageById?'备注预览':'点击查看备注'" trigger="hover" content="">
            <el-button :loading="performance_findMessageByIdLoading&&performance_findMessageByIdThis==scope.row.id" @click="performance_findMessageById(scope.row)" v-if="scope.row.is_note==1" slot="reference" type="text">备注预览</el-button>
            <slot name="DOM">
              <div class="preview-DOM">
                <div v-for="(it,itIndex) of scope.row.performance_findMessageById" :key="itIndex" class="preview_box">
                  <div class="preview-title">
                    {{it.name}}备注
                  </div>
                  <div class="preview-container">
                    {{it.message}}
                  </div>
                  <el-divider></el-divider>
                </div>
              </div>
            </slot>
          </el-popover>
          <el-button :loading="detailsLoading&&performance_findByIdThis==scope.row.id" @click="performance_findById(scope.row)" class="successColor" type="text">详情</el-button>
          <el-button @click="$openPage('/performanceAppraisal/performanceAppraisalEdit',scope.row)" class="warningColor" type="text">编辑</el-button>
          <el-button @click="performance_delete(scope.row)" class="danageColor" type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-if="tablePaginationQuery.total" :query="tablePaginationQuery" @paginationCallBack="paginationCallBack" />

    <!--抽屉 -->
    <el-drawer :show-close="true" :wrapperClosable="true" size="660px" title="详情" :visible.sync="showDrawer" direction="rtl">
      <div style="width:660px; height: 100%;position: fixed;overflow-y: auto; padding-bottom: 96px;">
        <div style="padding:36px 18px">
          <el-card class="box-card">
            <div class="user-info cenLeft">
              <div style="font-size: 20px;font-weight: bold;" class="userName cenLeft">
                {{dataRowDetile.user_name}}
                <el-divider direction="vertical"></el-divider>
              </div>
              <div class="userName cenLeft">
                自评 {{dataRowDetile.me_score}}分 {{gradeInit(dataRowDetile.me_score).gradeadd}}
              </div>
            </div>
            <div class="dept-info">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>{{dataRowDetile.dept_list}}</el-breadcrumb-item>
              </el-breadcrumb>
            </div>
            <div class="dept-info">
              提交时间：
              {{dataRowDetile.create_time}}
            </div>
          </el-card>
          <el-divider content-position="left">价值观（占比40%）</el-divider>
          <el-card v-for="(item,index) of senseOfWorth" :key="index" class="marginTopBotom" :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <div> {{item.question_name}} (占比{{item.rare}}%)</div>
              <el-input class="textareaBorderNone" style="font-size:14px;margin-top:6px;" readonly type="textarea" :autosize="{ minRows: 1, }" placeholder="" v-model="item.task"> </el-input>
              <div v-for="(markListItem,markListIndex) of item.markList" :key="markListIndex" class="bottom clearfix">
                <el-divider content-position="left">{{markListItem.user_name}}评价/评分</el-divider>
                <el-form :model="markListItem" ref="markListItem" label-width="60px">
                  <el-form-item label="评价" prop="messge" :rules="{ required: true, message: '评价不能为空' }">
                    <el-input :disabled="!markListItem.readonlyNo" v-model.trim="markListItem.messge" type="textarea" :autosize="{ minRows: 2, }"></el-input>
                  </el-form-item>
                  <el-form-item label="评分" prop="score" :rules="{ required: true, message: '评分不能为空' }">
                    <el-input-number :disabled="!markListItem.readonlyNo" style=" width: 100%;" v-model="markListItem.score" controls-position="right" :step="10" :min="1" :max="100"></el-input-number>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-card>
          <el-divider content-position="left">工作绩效（占比60%）</el-divider>
          <el-card v-for="(item,index) of jobPerformance" :key="index+100" class="marginTopBotom" :body-style="{ padding: '0px' }">
            <div style="padding: 14px;">
              <div> {{item.question_name}} (占比{{item.rare}}%)</div>
              <el-input class="textareaBorderNone" style="font-size:14px;margin-top:6px;" readonly type="textarea" :autosize="{ minRows: 1, }" placeholder="" v-model="item.task"> </el-input>
              <div v-for="(markListItem,markListIndex) of item.markList" :key="markListIndex" class="bottom clearfix">
                <el-divider content-position="left">{{markListItem.user_name}}评价/评分</el-divider>
                <el-form :model="markListItem" ref="markListItem" label-width="60px">
                  <el-form-item label="评价" prop="messge" :rules="{ required: true, message: '评价不能为空' }">
                    <el-input :disabled="!markListItem.readonlyNo" v-model.trim="markListItem.messge" type="textarea" :autosize="{ minRows: 2, }"></el-input>
                  </el-form-item>
                  <el-form-item label="评分" prop="score" :rules="{ required: true, message: '评分不能为空' }">
                    <el-input-number :disabled="!markListItem.readonlyNo" style=" width: 100%;" v-model="markListItem.score" controls-position="right" :step="10" :min="1" :max="100"></el-input-number>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </el-card>

          <el-card v-if="scopePolle.length" class="marginTopBotom" :body-style="{ padding: '0px ', }">
            <div class="cenLeft flex-wrap">
              <el-button style="margin:16px 6px;" v-for="(item,index) in scopePolle" :key="index" plain> {{sureMySelf(item.role_type)}}{{item.user_name}}{{byrole_typeText(item.role_type)}}：{{(item.sunNum).toFixed(2)}}
                <span v-if="item.role_type == '1'">{{gradeInit(item.sunNum).gradeadd}}</span>
              </el-button>
            </div>
          </el-card>

          <el-card class="marginTopBotom" v-if="dataRowDetile.performance_findMessageById&&dataRowDetile.performance_findMessageById.length" :body-style="{ padding: '14px' }">
            <div style="width: 100%;height:auto" v-for="(it,itIndex) of dataRowDetile.performance_findMessageById" :key="itIndex">
              <div class="readme-title"> {{it.name}}备注 </div>
              <el-input disabled style="width: 100%;" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入备注内容" v-model.trim="it.message"> </el-input>
              <el-divider v-if="itIndex<dataRowDetile.performance_findMessageById.length-1"></el-divider>
            </div>
          </el-card>

          <el-timeline v-if="dataRowDetile.approval_process" style=" margin-top: 26px;">
            <el-timeline-item type="success" v-if="dataRowDetile.approval_process.submitpsn" :timestamp="dataRowDetile.approval_process.submitpsn.create_time" placement="top">
              <el-card>
                <h3>【{{dataRowDetile.approval_process.submitpsn.name}}】发起申请</h3>
              </el-card>
            </el-timeline-item>
            <el-timeline-item :type="approve_status[item.status||0].type" v-for="(item,index) of dataRowDetile.approval_process.scoreApprovepsn" :key="index" v-if="dataRowDetile.approval_process.scoreApprovepsn.length" :timestamp="item.create_time" placement="top">
              <el-card>
                <h3 :class="approve_status[item.status||0].state">【{{item.name}}】{{approve_status[item.status||0].lable}}</h3>
              </el-card>
            </el-timeline-item>
          </el-timeline>

        </div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import { grade } from "@/components/publicJs/grade.js"; //评分等级
import service from "@/api";
import pagination from "@/components/pagination"; //分页组件
import search from "@/components/search"; //搜索组件
import performanceAppraisalSearch from "@/components/publicData/performanceAppraisalSearch"; //搜索字段
import ivDrawer from "@/components/ivDrawer";
import approve_status from "@/components/publicJs/approve_status"; //评分状态
import representations_status from "@/components/publicJs/representations_status"; //申述状态
// import indexData from "./indexData.js";
// import detile from "./detile.js";
export default {
  components: { search, pagination, ivDrawer },
  data() {
    return {
      scopePolle: [], //评分人员评分情况
      approve_status: approve_status, //评分状态
      representations_status: representations_status, //申述状态
      dataRowDetile: {}, //详情
      senseOfWorth: [], //价值观部分
      jobPerformance: [], //工作绩效部分
      performance_findMessageByIdLoading: false,
      performance_findMessageByIdThis: "", //当前查看备注的ID
      performance_findByIdThis: "", //当前编辑的id
      showDrawer: false,
      tableSelection: [], //表格的选项
      searchField: JSON.parse(JSON.stringify(performanceAppraisalSearch)), //搜索字段
      tableData: [], //表格数据
      tableLoading: false,
      detailsLoading: false,
      leadOutLoading: false,
      tablePaginationQuery: { start: 0, limit: 10, total: 0, current: 1 } //表格分页参数
    };
  },
  mounted() {
    this.performance_list();
  },
  methods: {
    // 分页查询我审核的数据
    async performance_list() {
      let searchForm = {
        // 搜索字段
        ...this.$refs.seachFrom.searchForm
      };
      if (searchForm.create_time && searchForm.create_time.length) {
        searchForm.create_start_time = searchForm.create_time[0];
        searchForm.create_end_time = searchForm.create_time[1];
        delete searchForm.create_time;
      }
      if (searchForm.approve_date && searchForm.approve_date.length) {
        searchForm.approve_start_date = searchForm.approve_date[0];
        searchForm.approve_end_date = searchForm.approve_date[1];
        delete searchForm.approve_date;
      }
      if (searchForm.hiredate_data && searchForm.hiredate_data.length) {
        searchForm.hiredate_start = searchForm.hiredate_data[0];
        searchForm.hiredate_end = searchForm.hiredate_data[1];
        delete searchForm.hiredate_data;
      }
      if (searchForm.me_date && searchForm.me_date.length) {
        searchForm.me_start_date = searchForm.me_date[0];
        searchForm.me_end_date = searchForm.me_date[1];
        delete searchForm.me_date;
      }
      if (searchForm.quarterTime && searchForm.quarterTime.length) {
        searchForm.quarterStartDate = this.$moment(
          searchForm.quarterTime[0],
          "YYYY-MM-DD"
        );
        searchForm.quarterEndDate = this.$moment(
          searchForm.quarterTime[1],
          "YYYY-MM-DD"
        );

        delete searchForm.quarterTime;
      }
      console.log(searchForm);
      const { start, limit } = this.tablePaginationQuery;
      this.tableLoading = true;
      const { data = {} } = await service.performance_list({
        start,
        limit,
        current: 1,
        ...searchForm
      });
      this.tableLoading = false;
      this.tablePaginationQuery.total = data.results || 0;
      this.tableData = data.rows || [];
      // console.log(indexData.data.data);
      // this.tableData = indexData.data.data.rows || [];

      // console.log(data);
    },
    // 备注预览
    async performance_findMessageById(row) {
      this.performance_findMessageByIdThis = row.id;
      this.performance_findMessageByIdLoading = true;
      const { data = {} } = await service.performance_findMessageById({
        id: row.id
      });
      this.performance_findMessageByIdLoading = false;
      console.log(data);
      row.performance_findMessageById = data.rows || [];
    },
    byrole_typeText(role_type) {
      if (role_type == "1") {
        return "总评分";
      } else if (role_type == "2") {
        return "工作绩效评分";
      } else if (role_type == "3") {
        return "价值观评分";
      } else {
        return "评分";
      }
    },
    // 确定身份
    sureMySelf(role_type) {
      if (role_type == 1) {
        return "上级领导/";
      } else if (role_type == 2) {
        return "区域领导/";
      } else if (role_type == 3) {
        return "hr/";
      } else {
        return "";
      }
    },
    async sumScoreFun() {
      let examineList = this.senseOfWorth.concat(this.jobPerformance);
      // console.log("examineList", examineList);
      let surePopleUser_id = []; //确定评分人员id
      for (let i = 0; i < examineList.length; i++) {
        // 确定评分人员id
        const examineListItem = examineList[i];
        if (examineListItem.markList && examineListItem.markList.length) {
          for (
            let index = 0;
            index < examineListItem.markList.length;
            index++
          ) {
            const markListItem = examineListItem.markList[index];
            if (surePopleUser_id.indexOf(markListItem.user_id) == -1) {
              surePopleUser_id.push(markListItem.user_id);
            }
          }
        }
      }
      // console.log("surePopleUser_id", surePopleUser_id);
      // 通过评分人员ID建立都是个对象
      let surePopleUser_idObj = {};
      for (let index = 0; index < surePopleUser_id.length; index++) {
        surePopleUser_idObj[surePopleUser_id[index]] = {
          sunNum: 0, //总分数
          user_id: surePopleUser_id[index],
          user_name: "",
          role_type: ""
        };
      }
      // console.log("surePopleUser_idObj", surePopleUser_idObj);

      // 把数据发给相应对象
      for (let i = 0; i < examineList.length; i++) {
        const examineListItem = examineList[i];
        // console.log("examineListItem", examineListItem);
        if (examineListItem.markList && examineListItem.markList.length) {
          for (
            let index = 0;
            index < examineListItem.markList.length;
            index++
          ) {
            const markListItem = examineListItem.markList[index];
            // console.log("markListItem", markListItem);
            let num =
              (Number(markListItem.score) || 0) *
              (examineListItem.rare / 100).toFixed(4);
            surePopleUser_idObj[markListItem.user_id].sunNum += num;
            surePopleUser_idObj[markListItem.user_id].user_name =
              markListItem.user_name;
            surePopleUser_idObj[markListItem.user_id].role_type =
              markListItem.role_type;
          }
        }
      }
      // console.log(surePopleUser_idObj);

      this.scopePolle = [];
      for (let i = 0; i < surePopleUser_id.length; i++) {
        this.scopePolle.push(surePopleUser_idObj[surePopleUser_id[i]]);
      }
      // console.log("scopePolle", this.scopePolle);
    },
    // 查看详情
    async performance_findById(row) {
      this.performance_findByIdThis = row.id;
      this.detailsLoading = true;
      const { data = {} } = await service.performance_findById({
        id: row.id
      });
      this.detailsLoading = false;
      data.create_time = row.create_time;

      // const data = detile.data;
      // console.log("data", data);
      this.dataRowDetile = JSON.parse(JSON.stringify(data));
      // console.log(data.approval_process.scoreApprovepsn);
      // 审批已拒绝后面不显示
      if (
        data.approval_process &&
        data.approval_process.scoreApprovepsn.length
      ) {
        this.dataRowDetile.approval_process.scoreApprovepsn = [];
        for (let i = 0; i < data.approval_process.scoreApprovepsn.length; i++) {
          if (data.approval_process.scoreApprovepsn[i].status == 2) {
            this.dataRowDetile.approval_process.scoreApprovepsn.push(
              data.approval_process.scoreApprovepsn[i]
            );
            break;
          }
          this.dataRowDetile.approval_process.scoreApprovepsn.push(
            data.approval_process.scoreApprovepsn[i]
          );
        }
      }

      if (data.examineList.length) {
        this.senseOfWorth = [];
        this.jobPerformance = [];
        data.examineList.map(item => {
          // console.log(item.markList);
          if (item.question_type == 1) {
            // 价值观部分
            let obj = {
              ...item,
              showAll: false
            };
            this.senseOfWorth.push(obj);
          } else {
            // 工作绩效部分
            let obj = {
              ...item,
              showAll: false
            };
            this.jobPerformance.push(obj);
          }
        });

        // if (this.is_score == 1 && this.score_status == 1) {
        //   //是否评分 0 不评分，1评分,如果是可以评分的则增加评分的字段和填写地方
        //   this.isShowSumScore = true;
        //   // 角色类型的值 1上级领导，2区域领导 3hr， 4审核领导
        //   if (this.role_type == "1") {
        //     // 上级领导=》二部分评价评分，总评分，备注，通过操作(已评过则去掉,只读)
        //     this.senseOfWorth.map(item => {
        //       item.markList.push({
        //         messge: "",
        //         score: "",
        //         readonlyNo: true //不是只读
        //       });
        //     });
        //     this.jobPerformance.map(item => {
        //       item.markList.push({
        //         messge: "",
        //         score: "",
        //         readonlyNo: true //不是只读
        //       });
        //     });
        //   } else if (this.role_type == "2") {
        //     // 2：区域领导=》工作绩效评价评分，总评分，备注，通过操作(已评过则去掉,只读)
        //     this.jobPerformance.map(item => {
        //       item.markList.push({
        //         messge: "",
        //         score: "",
        //         readonlyNo: true //不是只读
        //       });
        //     });
        //   } else if (this.role_type == "3") {
        //     // 3：hr=》价值观部分评价评分，总评分，备注，通过操作(已评过则去掉,只读)
        //     this.senseOfWorth.map(item => {
        //       item.markList.push({
        //         messge: "",
        //         score: "",
        //         readonlyNo: true //不是只读
        //       });
        //     });
        //   } else if (this.role_type == "4") {
        //     this.isShowSumScore = false;
        //     // 4：上上级领导待审核=》备注，通过操作(已评过则去掉,只读)
        //   }
        // }
      }

      this.sumScoreFun();
      const performance_findMessageById = await service.performance_findMessageById(
        {
          id: row.id
        }
      );
      // 增加备注
      this.$set(
        this.dataRowDetile,
        "performance_findMessageById",
        performance_findMessageById.data.rows || []
      );

      this.showDrawer = true;
    },
    // 关闭抽屉
    closeDrawer() {
      this.showDrawer = false;
    },
    // 等级初始化
    gradeInit(me_score) {
      return grade(me_score);
    },
    // 搜索的回掉函数
    searchCallBack(val) {
      this.performance_list();
    },
    // 分页的回掉函数
    paginationCallBack() {
      this.performance_list();
    },
    // 表格选中值
    tableComChange(val) {
      this.tableSelection = val;
    },
    async performance_delete(scopeRow) {
      if (!(await this.$confirm(`此操作将进行删除`))) {
        return;
      }
      const { success = false } = await service.performance_delete({
        id: scopeRow.id
      });
      if (success) {
        this.$message.success("删除成功");
        this.performance_list();
      }
    },
    // 同意申诉/拒绝申诉
    async performance_appeal(is_appeal) {
      if (!this.tableSelection.length) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      const $confirm = await this.$confirm(
        `此操作将${is_appeal == 2 ? "同意" : "拒绝"}申诉`
      );
      if (!$confirm) {
        return;
      }
      let isSuccessNum = 0;
      for (let index = 0; index < this.tableSelection.length; index++) {
        const element = this.tableSelection[index];
        const { success = false } = await service.performance_appeal({
          is_appeal,
          id: element.id
        });
        if (success) {
          isSuccessNum++;
        }
      }
      if (!isSuccessNum) {
        return;
      } else if (isSuccessNum == this.tableSelection.length) {
        this.$message({
          message: "操作成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "部分操作成功！",
          type: "warning"
        });
      }
      this.performance_list();
    }, // 下发得分
    async performance_issuedScore() {
      if (!this.tableSelection.length) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      const $confirm = await this.$confirm("此操作将下发得分");
      if (!$confirm) {
        return;
      }
      let isSuccessNum = 0;
      for (let index = 0; index < this.tableSelection.length; index++) {
        const element = this.tableSelection[index];
        const { success = false } = await service.performance_issuedScore({
          id: element.id
        });
        if (success) {
          isSuccessNum++;
        }
      }
      if (!isSuccessNum) {
        return;
      } else if (isSuccessNum == this.tableSelection.length) {
        this.$message({
          message: "操作成功！",
          type: "success"
        });
      } else {
        this.$message({
          message: "部分操作成功！",
          type: "warning"
        });
      }
      this.performance_list();
    },
    // 导出
    async performance_expExcel() {
      if (!this.tableSelection.length) {
        this.$message({
          message: "请至少选择一项",
          type: "warning"
        });
        return;
      }
      let ids = "";
      this.tableSelection.map(item => {
        ids += `${item.id},`;
      });
      this.leadOutLoading = true;
      const { data = {} } = await service.performance_expExcel({
        ids
      });
      this.leadOutLoading = false;
      console.log(data);
      if (data.status === 200 && data.data) {
        var disposition = data.headers["content-disposition"];
        var fileName = decodeURI(
          disposition.substring(
            disposition.indexOf("filename=") + 9,
            disposition.length
          )
        );
        let blob = new Blob([data.data], { type: "application/xlsx" }); //
        let link = document.createElement("a");
        link.href = window.URL.createObjectURL(blob);
        // link.download = "绩效考核.xlsx";
        link.download = "绩效考核.xls";
        link.click();
        link.remove();
        this.$message({
          message: "导出成功",
          type: "success"
        });
      } else {
        this.$message({
          message: "导出失败",
          type: "warning"
        });
      }
    }
  }
};
</script>

<style scoped>
.preview-DOM {
  max-width: 600px;
  max-height: 460px;
  overflow-y: auto;
}
.preview_box {
  width: auto;
  height: auto;
}
.preview-title,
.preview-container {
  width: auto;

  height: auto;
}
/* .preview-container {
  text-indent: 32px;
} */
.preview-title {
  font-weight: bold;
  margin-bottom: 6px;
}
</style>

<style scoped>
/* == */

.user-info {
  width: 100%;
  height: auto;
  text-align: left;
}
.userName {
  font-size: 18px;
}
.dept-info {
  width: 100%;
  height: auto;
  text-align: left;
  margin-top: 6px;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.con-hide {
  height: 36px;
  overflow: hidden;
}
.marginTopBotom {
  margin: 16px 0px;
}
.readme-title {
  text-align: left;
  margin-bottom: 8px;
}
</style>
